<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let obj = {};
        /*
            Proxy(obj,obj_proxy)构造函数接收两个参数
                - obj: 被代理的对象，也就是你要代理谁
                - obj_proxy: 负责代理的对象，也就是谁代理了obj这个对象
        */ 

        // 下面看看使用方式
        let proxy = new Proxy(obj,{
            // 和Object.defineProperty()里一样，代理对象里也有set和get方法对于赋值和读取操作进行拦截. 而且可以拦截obj中的所有属性的操作，无需再自己设置属性

            // target: 原始对象也就是这里的obj、key: 属性名
            get(target,key){
                console.log('get');
                return target[key];//把原始对象里对应key的值返回出去就好了
            },
            // target: 原对象也就是这里的obj、key: 属性名、value: 值
            set(target,key,value){
                console.log('set');
                target[key] = value;
            },

            // has方法会对于in操作符进行拦截，你在这个函数里return true那in操作符就会返回true，false同理。了解即可，这个方法不常用
            has(){
                return false;
            }
        });

        // 注意是通过代理对象修改属性，不是通过原始对象obj
        proxy.a = '123123';
        console.log(obj);//你会发现obj里也有了a属性且值为'123123';
        console.log('a' in proxy);//false, 因为上面的has方法返回了false
    </script>
</body>
</html>